<template>
  <div class="maincss">
    <div class="seachbox">
      <div style="display: inline-block;">
        <img src="../../assets/img/shizhan-title.png" />
        <!-- <el-switch
          active-color="#E6A23C"
          v-model="value1"
          active-text="收藏"
          inactive-text="">
        </el-switch> -->
      </div>
      <el-row v-if="value1==false" id="sub1">
         <el-row :gutter="25">
               <el-col :span="5">
                 <span style="margin-left: 13.75rem;font-size: small;font-weight: bolder;">方向:</span>
               </el-col>
              <el-col :span="19" style="margin-left: -10rem;">
                <!-- <span style="font-weight: bolder;margin-left: 1.625rem;">方向:</span> -->
                  <el-radio-group @change="gettwoclass" text-color="#CC6600" fill="#FFCC99" v-model="uiMyCourseVoquery.oneclass">
                    <el-radio label="全部" style="margin-top: 0.325rem;margin-left: -2rem;">
                      全部
                    </el-radio>
                      <el-radio style="margin-top: 0.325rem;margin-left: -2rem;" :label="subject" v-for="subject in allclasses.oneclasses">
                        {{subject}}
                      </el-radio>
                  </el-radio-group>
              </el-col>
          </el-row>
      </el-row>
      <br>
      <el-row v-if="value1==false" id="sub1">
         <el-row :gutter="25">
               <el-col :span="5">
                 <span style="margin-left: 13.75rem;font-size: small;font-weight: bolder;">分类:</span>
               </el-col>
              <el-col :span="19" style="margin-left: -10rem;">
                <!-- <span style="font-weight: bolder;margin-left: 1.625rem;">方向:</span> -->
                  <el-radio-group @change="getcourseinfowhenselecttwo" text-color="#CC6600" fill="#FFCC99" v-model="uiMyCourseVoquery.twoclass">
                    <el-radio label="不限" style="margin-top: 0.325rem;margin-left: -2rem;">
                      不限
                    </el-radio>
                    <el-radio v-if="uiMyCourseVoquery.oneclass!='全部'" style="margin-top: 0.325rem;margin-left: -2rem;" :label="two" v-for="two in twoclasses">
                      {{two}}
                    </el-radio>
                      <el-radio v-if="uiMyCourseVoquery.oneclass=='全部'" style="margin-top: 0.325rem;margin-left: -2rem;" :label="two" v-for="two in twoclasses">
                        {{two}}
                      </el-radio>
                  </el-radio-group>
              </el-col>
          </el-row>
      </el-row>

    </div>
    <!-- 课程列表 -->
   <div class="courselist">
      <!-- <div>
        <el-row id="sub12">
           <el-row :gutter="10">
                <el-col :span="10" style="margin-left: 10rem;">
                      <el-radio @change="subjectonechange" v-model="UiCourseVoquery.indexinfo" label="默认排序" style="margin-top: 0.325rem;margin-left: -2rem;">
                        默认排序
                      </el-radio>
                      <el-radio @change="subjectonechange" v-model="UiCourseVoquery.indexinfo" label="我的收藏" style="margin-top: 0.325rem;margin-left: -2rem;">
                        我的收藏
                      </el-radio>
                      <el-radio @change="subjectonechange" v-model="UiCourseVoquery.indexinfo" label="免费" style="margin-top: 0.325rem;margin-left: -2rem;">
                        免费
                      </el-radio>
                </el-col>
            </el-row>
        </el-row>
      </div> -->
      <div>
        <el-empty v-show="this.currentcourseinfo==null?true:false" description="课程空空如也"></el-empty>
        <div class="thisteachercourseboxmargin">
          <div class="thisteachercourseboxout" v-for="course in currentcourseinfo">
            <div class="thisteachercoursebox" @click="tocourse(course.id)">
              <img class="thisteachercourseimg" :src="course.cover"/>

              <div style="height: 6.25rem;">
                <span style="background-color:goldenrod;">精品课程</span>
                <br>
                <span style="font-weight: bold;">{{course.title}}</span>
              </div>
              <div style="font-size: smaller;">
                <span v-show="course.courseStarttime==null?true:false">永久开课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span v-show="course.courseStarttime!=null?true:false">{{course.courseStarttime}}至</span><span v-show="course.courseEndtime!=null?true:false">{{course.courseEndtime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="margin-bottom: 0rem;">报名人数{{course.usercount}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

      <div class="pager-box">
        <el-pagination
          class="page"
          background
          layout="total,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :page-size="10"
          :current-page="current"
          @current-change="handleCurrentChange"
          :total="total">
        </el-pagination>
      </div>
  </div>

</template>

<script>
  // import teacher from '@/api/edu/teacher/teacher'
  import mycourse from '@/api/edu/mycourse/mycourse'
  import cookie from 'js-cookie'

export default{
  data(){
    return{
    //我的课程中的变量
    allclasses: {},
    twoclasses: [],
    loginInfo: null,
    uid: '',
    // ////////////


     allcourseinfo: [],
     splitedcouseifo: [],
     currentcourseinfo: [],
     total: '',


     current: 1,
      uiMyCourseVoquery:{
        oneclass: '全部',
        twoclass: '不限',
        //排序
        userid: '',
      },
      value1: false,



    }
  },
  //远程搜索框舰艇和
  // mounted() {
  //       this.list = this.states.map(item => {
  //         return { value: `value:${item}`, label: `${item}` };
  //       });
  //     },
  created(){
    this.getuserinfo()


    // this.getsubjectinfo()
    // this.subjectonechange()
  },
  methods:{
    //选中二级分类的时候触发的事件
    getcourseinfowhenselecttwo(){
      mycourse.getcourseinfobythree(this.uiMyCourseVoquery).then(res =>{
        this.allcourseinfo=res.data.data.eduCourses
        this.total=this.allcourseinfo.length
        this.splitedcouseifo=this.group(this.allcourseinfo,10);
        console.log('测试分页结果：',this.splitedcouseifo)
        console.log(this.allcourseinfo)
        this.currentcourseinfo=this.splitedcouseifo[0]
      })
    },
    //根据uid oneclass 获取二级分类
    gettwoclass(){
      if(this.uiMyCourseVoquery.oneclass==='全部'){
        this.getallsubjectofuser(this.loginInfo.id)
        //获取课程

      }else{
        mycourse.gettwoclassesbyuidone(this.loginInfo.id,this.uiMyCourseVoquery.oneclass).then(response => {
          this.twoclasses=response.data.data.oneclasses
          console.log('测试获取到的二级分类：',this.twoclasses)
          mycourse.getcourseinfobythree(this.uiMyCourseVoquery).then(res =>{
            this.allcourseinfo=res.data.data.eduCourses
            this.total=this.allcourseinfo.length
            this.splitedcouseifo=this.group(this.allcourseinfo,10);
            console.log('测试分页结果：',this.splitedcouseifo)
            console.log(this.allcourseinfo)
            this.currentcourseinfo=this.splitedcouseifo[0]
          })
        })
      }

    },
    //获取我的课程中的用户信息
    getuserinfo(){
      if(cookie.get("uicenterMember")){
        this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
        this.uid=this.loginInfo.id
        console.log('测试登录信息存在情况1:',this.loginInfo)
        this.uiMyCourseVoquery.userid=this.loginInfo.id
        this.getallsubjectofuser(this.loginInfo.id)
      }else{
       console.log('还没有登录')
       this.loginInfo=null
       this.uid=''
      }
    },
    //获取我的课程的所有分类
    getallsubjectofuser(){
      mycourse.getallclassbyuid(this.loginInfo.id).then(response => {
        this.allclasses=response.data.data.classes
        this.twoclasses=this.allclasses.twoclasses
        mycourse.getcourseinfobythree(this.uiMyCourseVoquery).then(res =>{
          this.allcourseinfo=res.data.data.eduCourses

          this.total=this.allcourseinfo.length
          this.splitedcouseifo=this.group(this.allcourseinfo,10);
          console.log('测试分页结果：',this.splitedcouseifo)
          this.currentcourseinfo=this.splitedcouseifo[0]
        })
      })
    },
    //一级 二级条件改变的时候
    subjectonechange(){
      console.log('测试选中的东西xxx：',this.UiCourseVoquery)
      course.getcourseinfobyt(this.UiCourseVoquery).then(response => {
        this.allcourseinfo=response.data.data.eduCourses
        console.log('返回的所有课程：',this.allcourseinfo)


        this.total=this.allcourseinfo.length
        this.splitedcouseifo=this.group(this.allcourseinfo,10);
        console.log('测试分页结果：',this.splitedcouseifo)
        this.currentcourseinfo=this.splitedcouseifo[0]

        this.currenttwo=[]
        for(var i=0;i<this.subjects.length;i++){
          if(this.UiCourseVoquery.subjectone===this.subjects[i].title){
            for(var ii=0;ii<this.subjects[i].children.length;ii++){
              this.currenttwo.push(this.subjects[i].children[ii].title)
            }

          }
        }


      })

    },

    //分页辅助
    group(array, subGroupLength) {
          let index = 0;
          let newArray = [];
          while(index < array.length) {
              newArray.push(array.slice(index, index += subGroupLength));
          }
          return newArray;
      },
    handleCurrentChange(page){
      this.currentcourseinfo=this.splitedcouseifo[page-1]
    },
    //页面跳转
    tocourse(id){
     let newtarg=this.$router.resolve({
       path: '/course/'+id,
     })
     window.open(newtarg.href, '_blank');
    }
  },
}
</script>

<style>
/* 课程列表 */
.courselist{
  margin-top: 0.25rem;
  /* height: 25rem; */
  background-color: white;
}
.thisteachercourseimg{
    width: 100%;height: 20.5rem;
    transform-style: preserve-3d;
    transition: all 1s;
    border-radius: 0.425rem 0.425rem 0rem 0rem;
  }
  .thisteachercourseimg:hover{
    /* ransform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg); */
     border-radius: 100%;
  }
  .thisteachercourseboxout{
    display: inline-table;
    width: 20%;
    height: 24rem;
    margin-top: 2rem;
  }
  .thisteachercoursebox{
    width: 90%;
    height: 98%;
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    margin-left: 5.3%;
    border-radius: 0.425rem;
  }
  .eltabpane{
    margin-top: 0.25rem;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  }
  .teacherinfocontent{
    margin-left: 0.2%;
  }
  .teacherbanner{
    background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
     background-blend-mode: normal,color-burn;
  }

  /*           */

  .seachbox{
    width: 100%;
    background-color: #F2F2F2;
  }
  #sub1 .el-radio__input{
      display: none;
      margin-top: 0.325rem;
  }
  #sub12 .el-radio__input{
      display: none;
      margin-top: 0.325rem;
  }
  /* 选中后的字体颜色 */
  .el-radio__input.is-checked + .el-radio__label {
    color: white !important;
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    border-radius: 6.3125rem !important;
    margin-top: 0.325rem !important;
    padding-right: 0.75rem;
    font-weight: bold;
  }
  #sub12 .el-radio__input.is-checked + .el-radio__label {
    color: white !important;
    background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
    border-radius: 6.3125rem !important;
    margin-top: 0.325rem !important;
    padding-right: 0.75rem;
    font-weight: bold;
  }

  /* 搜索框样式 */
 .el-select .el-input.is-focus .el-input__inner{
     border:0px;
   }
   .el-select .el-input .el-input__inner{
       border:0px;
     }
.el-button--warning {
    color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    border-color: #F2F2F2;
  }
  .el-button--warning:hover{
    color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
    border-color: #F2F2F2;
  }
  .el-button--warning:focus{
   color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
   background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
   border-color: #F2F2F2;
  }

.radiobuttonone1{
    border-radius: 0.625rem;
    background-color:  white;
  }
  .radiobuttonone{
    border-radius: 0.625rem;
    background-color:  white;
    margin: 0.375rem;
    outline-color: white;
    line-height: none;
    outline-style: none;
    border: #000000;
  }
  .searchcourse{
    background-color: white;
  }








  /* 主页面背景色 */
  .maincss{

  }
  /* 讲师名称  讲师级别 讲师出身 */
  .teachern{
    color: #FFFFFF;
    font-weight: bold;
    font-family: "felix titling";
    font-style: inherit;
  }
  .teachercla{
    font-weight: 200;
    background-color: darkgoldenrod;
  }
  .teacherimglist{

  }
  .teacherbox{
    text-align: center;
  }
  .teacherimgx{
     border-radius: 100%;
     height: 17.25rem;
     width: 17.25rem;
     margin-top: 1.25rem;
     transform-style: preserve-3d;
     transition: all 1.5s;
  }
  /* 讲师头像反转 */
  .teacherimgx:hover{
    transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
  }

  .teachercontent{
    border-radius: 0.5rem;
    margin-top: 3%;
    margin-left:3%;
    width: 94%;
    height: 94%;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  }
  .teacherbox{
    width: 20%;
    height: 24.5rem;
    display: inline-table;
  }
  .page{
   text-align: center;
   margin-top: 1.25rem;
  }
 /*带背景的分页按钮背景色begin*/
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #08C0B9;
   color: #FFF;
 }
 .el-pagination.is-background .el-pager li.active {
   color: #fff;
   cursor: default;
 }
 .el-pagination.is-background .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
   background-color: #08C0B9;
   color: #FFF;
 }
 /*带背景的分页按钮背景色end*/


 /*不带背景的分页按钮背景色begin*/
 .el-pager li.active {
   color: #08C0B9;
   cursor: default;
 }
 .el-pagination .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }


/* 修改开关的样式 */
.el-switch__label {
  font-size: 16px !important;
  color:  darkgoldenrod!important;
}
.el-switch__label *{
  font-size: 16px !important;
}
/*显示文字*/
.el-switch__label.is-active {
  display: block;
}
.el-switch__core {
  width: 45px;
  height: 22px;
  border: 2px solid #DCDFE6;
  border-radius: 13px;
}

</style>
